<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .fasong {
            width: 400px;
            height: 80px;
            margin: 100px auto;
        }
        
        .fasong input {
            width: 250px;
            height: 37px;
            border: 1px solid red;
            outline: none;
        }
        
        ul {
            width: 500px;
            border: 1px solid red;
            margin: 10px auto;
        }
        
        button {
            width: 75px;
            height: 38px;
            border: none;
            line-height: 38px;
            margin-left: 10px;
            color: white;
            background-color: red;
        }
        
        li {
            width: 300px;
            height: 50px;
            margin: 10px auto;
            list-style: none;
            color: black;
            background-color: rgb(202, 200, 200);
        }
    </style>
</head>

<body>
    <div class="fasong"><input type="text"><button>发送</button></div>
    <ul>评论区：

    </ul>
    <script>
        var bts = document.querySelector('button');
        var uls = document.querySelector('ul');
        var ins = document.querySelector('input');
        bts.onclick = function() {
            if (ins.value == '') {
                alert('内容不能为空！');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = ins.value;
                /* console.log(ins.value); */
                uls.insertBefore(li, uls.children[0]);
            }
            /* onsole.log('dianjil'); */

        }
    </script>
</body>

</html>